<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title></title>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
		$(function(){
	        thaiDatepicker("expenseDate","#","1");
			$("#allocateCode").combobox();
			$("#btnSave").button({
	            icons: {
	                primary: "ui-icon-disk"
	            }
			}).click(function(){
	        	dateFormat(document.getElementById("expenseDate"));
				if(validateEmpty()){
					var transferAmount = document.getElementsByName("transferAmount");
					var sum = 0.00;
					for(var i=0;i<transferAmount.length;i++){
						if(transferAmount[i].value != ""){
							sum = parseFloat(sum) + toFloat(transferAmount[i].value);
						}
					}
					if (parseFloat($("#remain").val()) < parseFloat(sum) && $("#negative").val() == "0"){
						alert("ติดลบไม่ได้");
					}else if (parseFloat($("#remain").val()) < 0 && ($("#negative").val() == "1" || $("#negative").val() == "0")){
						alert("ติดลบได้ 1 ครั้ง");
					}else{
						$("#saveForm").submit();
					}
				}
			});
			$("#btnConfirm").button({
	            icons: {
	                primary: "ui-icon-circle-check"
	            }
			}).click(function(){
	        	dateFormat(document.getElementById("expenseDate"));
				if(confirm('คุณต้องการยืนยันการส่งอนุมัติ?')==true){
					$("#job").val("confirm");
					$("#saveForm").submit();
				}
			});
			$("#btnBack").button({
		        icons: {
		      	  primary: "ui-icon-arrowreturnthick-1-w"
				}
			}).click(function(){
				$("#job").val("back");
				$("#saveForm").submit();
			});
		});
		function isUse(id,index){
			var value = document.getElementById(id).value;
			if(value == "N"){
				document.getElementById(id).value = "Y";
			}else{
				document.getElementById(id).value = "N";
				document.getElementById("transferAmount"+index+"").value = "";
			}
		}
		function isCheck(id,value){
			if(value != "" && value != "0"){
				document.getElementById(id).checked = true;
				document.getElementById(id).value = "Y";
			}else{
				document.getElementById(id).checked = false;
				document.getElementById(id).value = "N";
			}
		}
		function getAllocateByBudgetYear(value){
			var dhtml = new DHTML();
			$("#allocateCodeSpan input").val("");
			$('#allocateCode')
			.find('option')
		    .remove()
		    .end()
		    .append('<option value=""></option>')
		    .val('');
			if(value != ""){
				$.ajax({
					type: "post",
					url: "/provacc/acc67",
					dataType: "json",
					async: false,
					cache: false,
					data: {
						app: "ajax",
						job: "getAllocate",
						budgetYear: value
					},
					success: function(data) {
						if(data.length > 0){
							for(var i=0;i<data.length;i++){
								dhtml.createElement(document.getElementById("allocateCode"), ["option","value="+data[i].code], data[i].code +" - "+ data[i].name);
							}
						}else{
							return false;
						}
					}
				});
			}else{
				dhtml.createElement(document.getElementById("allocateCode"), ["option","value="], "----- เลือก -----");
			}
		}

		function getRemain(value){
			$.ajax({
				type: "post",
				url: "/provacc/acc67",
				dataType: "json",
				async: false,
				cache: false,
				data: {
					app: "ajax",
					job: "getRemain",
					provinceId: $("#provinceId").val(),
					budgetYear: $("#budgetYear").val(),
					allocateCode: value
				},
				success: function(data) {
					if(data[0].result == "1"){
						$("#remain").val(data[0].remain);
						$("#negative").val(data[0].negative);
					}
				}
			});
		}
		function getVenderByProvinceId(){
			$("#job").val("getVenderByProvinceId");
			$("#saveForm").submit();
		}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC60303')}"/>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="saveForm" id="saveForm" action="${pageContext.request.contextPath}/acc6" method="post">
		<input type="hidden" name="app" id="app" value="ACC60303"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<input type="hidden" name="docNo" id="docNo" value="${docNo}"/>
		<input type="hidden" name="remain" id="remain" value=""/>
		<input type="hidden" name="negative" id="negative" value=""/>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC60303}</b></th>
			</tr>
			<tr>
				<td class="bold" width="15%">เลขที่เอกสาร : </td>
				<td>${docNo}</td>
			</tr>
			<tr>
				<td class="bold">จังหวัด : </td>
				<td>
					<c:if test="${userInfo.areaLevel =='3'}">
						<c:forEach var="data" items="${userInfo.listUserProvice}">
							${data.provinceName}
							<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">
						</c:forEach>
					</c:if>
					<c:if test="${userInfo.areaLevel=='1' || userInfo.areaLevel=='2'}">
						<c:if test="${job == 'save'}">
							<select name="provinceId" id="provinceId" onchange="getVenderByProvinceId();">
								<option value="">----- เลือก -----</option>
								<c:forEach var="data" items="${userInfo.listUserProvice}">
									<c:if test="${data.provinceId == provinceId}" var="provinceSeleted"/>
									<option value="${data.provinceId}" ${provinceSeleted?'selected':''}>${data.provinceName}</option>
								</c:forEach>
							</select>
							<span id="$provinceId" class="red">*</span>
						</c:if>
						<c:if test="${job == 'edit'}">
							${provinceName}
							<input type="hidden" name="provinceId" id="provinceId" value="${provinceId}">
						</c:if>
					</c:if>
				</td>
			</tr>
			<tr>
				<td class="bold">ปีงบประมาณ : </td>
				<td>
					<c:if test="${job == 'save'}">
					<select name="budgetYear" id="budgetYear" onchange="getAllocateByBudgetYear(this.value);">
						<option value="">----- เลือก -----</option>
						<c:forEach  var="data" items="${listBudgetYear}">
							<c:if test="${data.BUDGET_YEAR == expenseBean.budgetYear}" var="budgetYearSeleted"/>
							<option value="${data.BUDGET_YEAR}" ${budgetYearSeleted?'selected':''}>${data.BUDGET_YEAR}</option>
						</c:forEach>
					</select>
					<span id="$budgetYear" class="red">*</span>
					</c:if>
					<c:if test="${job == 'edit'}">
						${expenseBean.budgetYear}
						<input type="hidden" name="budgetYear" id="budgetYear" value="${expenseBean.budgetYear}">
					</c:if>
				</td>
			</tr>
			<tr>
				<td class="bold">วันที่จ่าย : </td>
				<td>
					<input type="text" name="expenseDate" id="expenseDate" size="12" maxlength="10" onkeypress="return numberAndSlash(event);" onblur="dateFormat(this);" value="${el:dateTh(expenseBean.expenseDate)}"/>
					<span id="#expenseDate" class="red">*</span>
				</td>
			</tr>
			<tr>
				<td class="bold">ชื่อการจ่าย : </td>
				<td>
					<input type="text" name="expenseSubject" id="expenseSubject" value="${expenseBean.expenseSubject}">
				</td>
			</tr>
			<tr>
				<td class="bold" valign="top">คำอธิบายการจ่าย : </td>
				<td>
					<textarea cols="40" rows="6" name="expenseDesc" id="expenseDesc">${expenseBean.expenseDesc}</textarea>
				</td>
			</tr> 
		</table>
		<c:if test="${!empty listVender}">
		<br/>
		<fieldset>
			<legend> รายละเอียดการจ่าย </legend>
			<table width="100%" class="ui-widget ui-widget-content">
				<tr>
					<td class="bold" width="15%">เอกสารอ้างอิง : </td>
					<td>
						<input type="text" name="refNo" id="refNo" value="${refNo}"/>
						<span id="#refNo" class="red">*</span>
					</td>
					<td class="bold" width="20%">กองทุนย่อยเฉพาะด้าน : </td>
					<td>
						<span id="allocateCodeSpan">
							<select name="allocateCode" id="allocateCode" onchange="getRemain(this.value);">
								<option value="">----- เลือก -----</option>
								<c:if test="${!empty listExpenseTransfer}">
		 							<c:forEach items="${lsAllocate}" var="lsAllocateData">
										<c:if test="${lsAllocateData.ALLOCATE_CODE == allocateCode}" var="selected"/>
										<option value="${lsAllocateData.ALLOCATE_CODE}" ${selected?'selected':''}>${lsAllocateData.ALLOCATE_CODE} - ${lsAllocateData.ALLOCATE_NAME}</option>
									</c:forEach>
								</c:if> 
							</select>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span id="$allocateCode" class="red" style="position: absolute;">*</span>
						</span>
					</td>
				</tr>
				<tr>
					<td class="bold">หมวดการจ่าย : </td>
					<td>
						<select name="categoryId" id="categoryId">
							<option value="">----- เลือก -----</option>
							<c:forEach items="${listCategory}" var="listCategoryData">
								<c:if test="${categoryId == listCategoryData.categoryId}" var="selected"/>
								<option value="${listCategoryData.categoryId}" ${selected?'selected':''}>${listCategoryData.categoryName}</option>
							</c:forEach>
						</select>
					<span id="$categoryId" class="red">*</span>
					</td>
					<td class="bold">ชื่อผู้รับผิดชอบ : </td>
					<td>
						<input type="text" name="responsibleName" id="responsibleName" value="${responsibleName}">
						<span id="#responsibleName" class="red">*</span>
					</td>
				</tr>
				<c:if test="${job == 'save'}">
					<tr>
						<td colspan="4">
							<table width="100%" class="acc67-grid ui-widget ui-widget-content">
								<tr>
									<th align="center" class="ui-state-default" width="5%">ใช้งาน</th>
									<th align="center" class="ui-state-default">สสอ.</th>
									<th align="center" class="ui-state-default" width="10%">จำนวนเงิน</th>
									<th align="center" class="ui-state-default" width="30%">ชื่อโครงการ/คำอธิบาย</th>
								</tr>
								<c:forEach items="${listVender}" var="data" varStatus="x">
									<tr class="grid-tr-${x.count % 2}">
										<td align="center"><input type="checkbox" name="isUse" id="isUse${x.count}" onclick="isUse(this.id,${x.count})" value="N"/></td>
										<td align="left">${data.venderName}</td>
										<td align="center">
											<input type="text" name="transferAmount" id="transferAmount${x.count}" class="text-amount" onkeypress="return numberAndDot(event, false);" onblur="this.value = addCommas2D(this.value); isCheck('isUse${x.count}',this.value);" />
										</td>
										<td align="center"><textarea cols="35" rows="2" name="transferDesc" id="transferDesc"></textarea></td>
										<input type="hidden" name="venderCode" id="venderCode" value="${data.venderCode}">
									</tr>
								</c:forEach>
							</table>
						</td>
					</tr>
				</c:if>	
				<c:if test="${!empty listExpenseTransfer}">
					<tr>
						<td colspan="4">
							<table width="100%" class="acc67-grid ui-widget ui-widget-content">
								<tr>
									<th align="center" class="ui-state-default" width="5%">ใช้งาน</th>
									<th align="center" class="ui-state-default">สสอ.</th>
									<th align="center" class="ui-state-default" width="10%">จำนวนเงิน</th>
									<th align="center" class="ui-state-default" width="30%">ชื่อโครงการ/คำอธิบาย</th>
								</tr>
								<c:forEach items="${listExpenseTransfer}" var="data" varStatus="x">
									<tr class="grid-tr-${x.count % 2}">
										<c:if test="${data.transferAmount != ''}" var="checked"/>
										<td align="center"><input type="checkbox" ${checked?'checked value="Y"':'value="N"'} name="isUse" id="isUse${x.count}" onclick="isUse(this.id,${x.count});"/></td>
										<td align="left">${data.venderName}</td>
										<td align="center">
											<input type="text" name="transferAmount" class="text-amount" id="transferAmount${x.count}" value="<fmt:formatNumber pattern="#,##0.00" value="${data.transferAmount}" />" onkeypress="return numberAndDot(event, false);" onblur="this.value = addCommas2D(this.value); isCheck('isUse${x.count}',this.value);" />
										</td>
										<td align="center"><textarea cols="35" rows="2"  name="transferDesc" id="transferDesc">${data.transferDesc}</textarea></td>
										<input type="hidden" name="venderCode" id="venderCode" value="${data.venderCode}">
									</tr>
								</c:forEach>
							</table>
						</td>
					</tr>
					</c:if>
					<tr>
						<td colspan="4" align="center">
							<c:if test="${fn:contains(auth, 'U') || fn:contains(auth, 'I')}">
								<button type="button" name="btnSave" id="btnSave" class="acc67-button">บันทึกข้อมูล</button>
								<button type="button" name="btnConfirm" id="btnConfirm" class="acc67-button">ส่งอนุมัติ</button>
							</c:if>
							<button type="button" name="btnBack" id="btnBack" class="acc67-button">ย้อนกลับ</button>
						</td>
					</tr>
				</table>
			</fieldset>
		</c:if>
		</form>
	</body>
</html>